<template>
	<div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
		<div class="pan-info">
			<div class="pan-info-roles-container">
				<slot/>
			</div>
		</div>
		<div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
	</div>
</template>

<script lang="ts" setup>

interface Props {
	image: string
	zIndex?: number
	width?: string
	height?: string
}

const props = withDefaults(defineProps<Props>(), {
	zIndex: 1,
	width: '150px',
	height: '150px'
})

</script>

<style lang="scss" scoped>
.pan-item {
	border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	cursor: default;
	display: inline-block;
	height: 200px;
	position: relative;
	width: 200px;
}

.pan-info-roles-container {
	padding: 20px;
	text-align: center;
}

.pan-thumb {
	background-position: center center;
	background-size: cover;
	border-radius: 5px;
	height: 100%;
	overflow: hidden;
	position: absolute;
	transform-origin: 95% 40%;
	transition: all 0.3s ease-in-out;
	width: 100%;
}

/* .pan-thumb:after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  border-radius: 5px;
  top: 40%;
  left: 95%;
  margin: -4px 0 0 -4px;
  background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
} */

.pan-info {
	border-radius: 5px;
	box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
	height: inherit;
	overflow: hidden;
	position: absolute;
	width: inherit;
}

.pan-info h3 {
	color: #fff;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 18px;
	height: 85px;
	letter-spacing: 2px;
	margin: 0 60px;
	padding: 22px 0 0 0;
	position: relative;
	text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
	text-transform: uppercase;
}

.pan-info p {
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	font-size: 12px;
	font-style: italic;
	margin: 0 30px;
	padding: 10px 5px;
}

.pan-info p a {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 5px;
	color: #fff;
	display: block;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 9px;
	font-style: normal;
	font-weight: 700;
	height: 80px;
	letter-spacing: 1px;
	margin: 7px auto 0;
	opacity: 0;
	padding-top: 24px;
	text-transform: uppercase;
	transform: translateX(60px) rotate(90deg);
	transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
	width: 80px;
}

.pan-info p a:hover {
	background: rgba(255, 255, 255, 0.5);
}

.pan-item:hover .pan-thumb {
	transform: rotate(-110deg);
}

.pan-item:hover .pan-info p a {
	opacity: 1;
	transform: translateX(0px) rotate(0deg);
}
</style>
